<template>
    <div v-loading="loading" class="page flex flex-column">
        <!-- 搜索栏 -->
        <div class="toppage">
            <el-form size="small" :inline="true" :model="serachForm" class="demo-form-inline">
                <el-form-item class='ml10' label="操作者">
                    <el-input v-model="serachForm.username" placeholder="模糊匹配"></el-input>
                </el-form-item>
                <el-form-item class='ml10' label="模块类型">
                    <el-select v-model="serachForm.modeltype">
                        <el-option v-for="(item, index) in modelType" :key="'m' + index" :label="item.name"
                            :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class='ml10' label="操作类型">
                    <el-select v-model="serachForm.opertype">
                        <el-option v-for="(item, index) in operType" :key="'m' + index" :label="item.name"
                            :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class='ml10' label="时间">
                    <el-date-picker v-model="serachForm.time" type="daterange" align="right" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>

                <el-form-item class='ml10'>
                    <el-button :disabled="!permissionInfo.select" type="primary" @click="onSerach">查询</el-button>
                    <el-button @click="onEmpty">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 显示栏 -->
        <div class="bottompage flex flex-column">
            <div class="bottompage-table">
                <el-table :stripe="true" height="100%" :data="tableData" style="width: 100%"
                    :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column prop="opertime" label="日期" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="username" label="操作者" width="180">
                    </el-table-column>
                    <el-table-column prop="content" label="内容">
                    </el-table-column>
                    <el-table-column prop="modeltype" label="模块类型">
                        <template slot-scope="scope">
                            {{ modeltype[scope.row.modeltype] || "" }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="opertype" label="操作类型">
                        <template slot-scope="scope">
                            {{ opertype[scope.row.opertype] || "" }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                    </el-table-column>
                </el-table>
            </div>
            <div class="bottompage-pagination mt10 flex flex-between flex--center">
                <div>
                    <el-button type="primary" size="small">打 印</el-button>
                    <el-button type="danger" size="small">导 出</el-button>
                </div>
                <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange"
                    :current-page="pageInfo.pageSize" :page-sizes="[10, 50, 100, 200, 300, 400, 500]"
                    :page-size="pageInfo.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
import { getLog } from '@/http/api/index';
import { formatDate } from '@/utils/util';

const pageDefault = {
    pageSize: 1,
    pageNum: 10,
    total: 0
}
export default {
    data() {
        return {
            permissionInfo: {
                select: false,
            },

            modelType: [
                { name: "登入登出", type: 1 },
                { name: "区域管理", type: 2 },
                { name: "用户管理", type: 3 },
                { name: "设备管理", type: 4 },
                { name: "权限管理", type: 5 },
                { name: "系统配置", type: 6 },
            ],
            modeltype: {
                '1': "登入登出",
                '2': "区域管理",
                '3': "用户管理",
                '4': "设备管理",
                '5': "权限管理",
                '6': "系统配置"
            },
            operType: [
                { name: "无", type: 0 },
                { name: "新增", type: 1 },
                { name: "编辑", type: 2 },
                { name: "删除", type: 3 },
                { name: "操作", type: 4 }
            ],
            opertype: {
                '0': "-",
                '1': "新增",
                '2': "编辑",
                '3': "删除",
                '4': "操作"
            },

            serachForm: {},
            loading: false,
            pageInfo: Object.assign(pageDefault),
            tableData: [],

            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        };
    },
    watch: {
        "serachForm.time"(nv) {
            console.log(nv, "--nv")
            this.getData();
        }
    },
    methods: {
        permissionCheck() {
            let permissionList = this.$store.getters.roleInfo.operlog;
            Object.assign(this.permissionInfo, permissionList);
            return;
        },
        getData() {
            if (this.serachForm.time) {
                this.serachForm.startTime = formatDate(this.serachForm.time[0], "YYYY-MM-DD") + " 00:00:00";
                this.serachForm.endTime = formatDate(this.serachForm.time[1], "YYYY-MM-DD") + " 23:59:59";
            }
            let data = Object.assign({ type: 'operlog' }, this.serachForm, this.pageInfo);
            this.loading = true;
            getLog(data).then(res => {
                this.tableData = res.data;
                this.pageInfo.total = res.total;

                this.loading = false;
            }).catch(err => {
                this.loading = false;
                this.$message.error("网络有点小问题!");
            });
            return;
        },

        // 查询
        onSerach() {
            for (let k in this.serachForm) {
                if (!k) delete this.serachForm[k];
            }
            if (Object.keys(this.serachForm).length > 0) {
                this.getData();
            } else {
                this.$message.error("输先入查询的条件!");
            }
            return;
        },
        onEmpty() {
            this.serachForm = {};
            return;
        },
        // 选显示条数
        pageSizeChange(val) {
            this.pageInfo.pageNum = val;
            this.getData();
            return;
        },
        // 选页
        pageCurrentChange(val) {
            this.pageInfo.pageSize = val;
            this.getData();
            return;
        }
    },
    mounted() {
        this.permissionCheck();
        if (this.permissionInfo.select) {
            this.getData();
        }
    }
}
</script>

 